<template>
  <div class="charge">
    <div class="container-m">
      <div class="info">
        <div class="l">
          <div class="l1">{{ $t("余额") }}</div>
          <div class="money">{{ getUserInfo.pointsBalance }}</div>
        </div>
        <div class="r">
          <div class="btn btn-1" @click="$router.push('/charge')">
            {{ $t("充值") }}
          </div>
          <div class="btn btn-2" @click="$router.push('/withdrawal')">
            {{ $t("提现") }}
          </div>
        </div>
      </div>
      <div class="jf">
        <div class="c-01">
          {{ $t("自定义充值金额：") }}
        </div>
        <div class="c-02 pt20">
          <el-form ref="from" :model="form" :rules="rules" style="flex: 1">
            <el-form-item prop="amount">
              <el-input :placeholder="$t('请输入充值金额')" v-model="form.amount" type="number" size="small"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="c-03 pt20">
          <div :class="['i', item === form.amount ? 'active' : '']" v-for="item in amountAvails" :key="item"
            @click="form.amount = item">
            {{ item }}{{ $t("元") }}
          </div>
        </div>
        <div class="c-04">
          {{ $t("大额充值联系管理员")
          }}<span class="red">{{ $t("免手续费") }}</span>
        </div>
      </div>
      <div class="jf" style="margin-top: 0.1rem">
        <div class="c-05">
          <el-radio-group v-model="radio" style="display: flex; flex-wrap: nowrap; flex-direction: column">
            <el-radio style="display: flex; align-items: center;" name="aliPay" value="0" inputid="aliPay" :label="0">
              <img class="ico" src="@/assets/images/pay_icon_05.png" alt="" />
              <label for="aliPay" class="mr-3 ng-star-inserted">{{ $t("支付宝支付") }}
                <span style="color: red" class="ng-star-inserted">(1% {{ $t("手续费") }})</span>
              </label>
            </el-radio>
            <el-radio style="display: flex; margin-top: 30px; align-items: center" name="weChatPay" inputid="weChatPay"
              value="1" :label="1">
              <img class="ico" src="@/assets/images/pay_icon_03.png" alt="" />
              <label for="weChatPay" class="mr-3 ng-star-inserted">{{ $t("微信支付") }}
                <span style="color: red" class="ng-star-inserted">(1% {{ $t("手续费") }})</span>
              </label>
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="submit" @click="submit">
        {{ $t("确认充值") }}
      </div>
      <div class="ts">
        <div class="item">
          <div class="tit">{{ $t("温馨提示") }}</div>
          <div class="cont">
            <div class="t t1">
              {{ $t("1，积分提现需要余额大于或等于10元，低于10元无法提现") }}
            </div>
            <div class="t t1">
              {{ $t("2，积分提现需要支付1%的手续费费用") }}
            </div>
            <div class="t t1">
              {{ $t("3，充值金额≥200可以联系客服充值免除手续费，提现也可以免除手续费")
              }}
            </div>
            <div class="t t1">
              {{ $t("4，如果需要提现，公众号聊天框输入:“提现”，然后点击发送，如果提现遇到问题请联系 {客服微信}") }}
            </div>
            <div class="t t1">
              {{ $t("5，累计充值的金额越多，会员等级越高，大客户可联系网站管理员增加积分") }}
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="block" style="padding: 10px 0;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50, 200]" :page-size="pageSize" :total="total"
          layout="prev, slot, next, jumper, sizes" style="text-align: center">
          <span>{{ currentPage }}</span>
        </el-pagination>
      </div>
      <div>
        <el-table @selection-change="handleSelectionChange" :data="orderList" stripe style="width: 100%">
          <el-table-column prop="service_theme" :label="$t('服务')" width="180">
            <template slot-scope="scope">
              <span>#{{ scope.row.service_id }} {{ scope.row.service_theme }}</span>
            </template>
</el-table-column>
<el-table-column prop="price" :label="$t('金额')" width="180" />
<el-table-column prop="ap_result" :label="$t('状态')">
  <template slot-scope="scope">
              <el-tag size="medium" :type="stateType[scope.row.ap_result]">{{ stateMapping(scope.row.ap_result)
                }}</el-tag>
            </template>
</el-table-column>
<el-table-column prop="imei" :label="$t('订单输入')" />
<el-table-column prop="result" :label="$t('结果')">
  <template slot-scope="scope">
              <span v-html="trim(scope.row.result)" />
            </template>
</el-table-column>
<el-table-column prop="create_time" :label="$t('创建时间')" />
<el-table-column prop="update_time" :label="$t('更新时间')" />
<el-table-column prop="desc" :label="$t('订单备注')" />
<el-table-column prop="manual_order_type" :label="$t('操作')">
  <template slot-scope="scope">
              <el-button v-if="hasFeedBack(scope.row.manualOrderType)" size="small" type="info">{{ $t('已反馈')
                }}</el-button>
              <el-button v-else @click="orderFeedBack(scope.row)" size="small" type="primary">{{ $t('反馈异常')
                }}</el-button>
            </template>
</el-table-column>
</el-table>
</div> -->
    </div>

    <pay-modal ref="payModal" :visible="visible" :result="apiRes" @closeDialog="closeDialog"></pay-modal>
  </div>
</template>

<script>
// import UserInfo from "@/components/home/UserInfo.vue";
import apiService from "@/api/apiService";
import PayModal from "./PayModal";
import {getUser, isMobile, isWindowsWhat} from "@/utils";
import Vue from "vue";
import { mapGetters } from "vuex";

export default {
  name: "ReCharge",
  components: { PayModal },
  data() {
    return {
      visible: false,
      amountAvails: [1, 5, 10, 30, 50, 100, 200, 500],
      radio: 0,
      agreeCheck: false,
      form: {
        amount: "",
      },
      apiRes: {}, // 接口返回数据包
      // keyboard: "",
      // payMethod: "wx",
      // wxpaySvgSrc: require("@/assets/wxpay.svg"),
      // aliPaySvgSrc: require("@/assets/alipay.svg"),
      rules: {
        amount: [
          { required: true, message: this.$t("金额不能为空"), trigger: "blur" },
          { validator: this.validateAmount, trigger: "blur" },
        ],
      },
      user: null,
    };
  },
  created() {
    this.user = getUser();
  },
  watch: {
    amount(amount) {
      if (amount < 1) {
        this.$message({
          msg: this.$t("最低可充值1元"),
          duration: 3000,
        });
        this.amount = 1;
      }
    },
  },
  computed: {
    ...mapGetters(["getUserInfo"]),
  },
  methods: {
    closeDialog(val) {
      this.visible = val;
    },
    // onBridgeReady() {
    //   console.log("WeixinJSBridge 完成")
    // },
    submit() {
      this.$refs.from.validate((valid) => {
        if (!valid) {
          return false;
        }
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        // eslint-disable-next-line no-constant-condition
        if (true) {
          // var vm= this;
          // if (typeof WeixinJSBridge == "undefined"){//微信浏览器内置对象。参考微信官方文档
          //   if( document.addEventListener ){
          //     document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(), false);
          //   }else if (document.attachEvent){
          //     document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady());
          //     document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady());
          //   }
          // }else{
          //   vm.onBridgeReady();
          // }


          const params = {
            wayCode: "",
            amount: this.form.amount,
            payDataType: "",
          };

          // if (isMobile()) {
            //手机端
          if (isMobile()) {
            if(isWindowsWhat()) {
              if (this.radio === 0) {
                params.wayCode = "ALI_QR";
                params.payDataType = "codeImgUrl";
              }
              if (this.radio === 1) {
                params.wayCode = "WX_NATIVE";
                params.payDataType = "codeImgUrl";
              }
            } else {
              if (this.radio === 0) {
                params.wayCode = "ALI_QR";
                params.payDataType = "payUrl";
              }
              //TODO 后面需要调起微信支付
              if (this.radio === 1) {
                params.wayCode = "WX_JSAPI";
                params.payDataType = "codeUrl";
              }
            }

          } else {
            if (this.radio === 0) {
              params.wayCode = "ALI_QR";
              params.payDataType = "codeImgUrl";
            }
            if (this.radio === 1) {
              params.wayCode = "WX_NATIVE";
              params.payDataType = "codeImgUrl";
            }
          }

          // } else {
          //   //PC端
          //   if (this.radio === 0) {
          //     params.wayCode = "ALI_QR";
          //     params.payDataType = "codeImgUrl";
          //   }
          //   if (this.radio === 1) {
          //     params.wayCode = "WX_NATIVE";
          //     params.payDataType = "codeImgUrl";
          //   }
          // }
          apiService
            .post("/rechange", params)
            .then((res) => {
              this.visible = true;
              this.apiRes = res.data;
              this.$refs.payModal.showModal(params.wayCode, res.data); // 打开弹窗
              loading.close();
            })
            .catch((e) => {
              // Vue.prototype.$message.error(this.$t("服务器异常,请重试"));
              Vue.prototype.$message.error(this.$t(e));

              // if (this.radio === 0) {
              //   params.wayCode = "ALI_QR";
              //   params.payDataType = "codeImgUrl";
              // }
              // if (this.radio === 1) {
              //   params.wayCode = "WX_NATIVE";
              //   params.payDataType = "codeImgUrl";
              // }
              // apiService
              //     .post("/rechange", params)
              //     .then((res) => {
              //       this.visible = true;
              //       this.apiRes = res.data;
              //       this.$refs.payModal.showModal(params.wayCode, res.data); // 打开弹窗
              //       loading.close();
              //     })
              //     .catch(() => {
              //       Vue.prototype.$message.error(this.$t("服务器异常,请重试"));
              //     });
            });
        }
      });
    },
    validateAmount(rule, value, callback) {
      value = `${value}`.trim();
      let n = Number(value);
      if (isNaN(n)) {
        return callback(new Error(this.$t("请输入数字")));
      }

      if (n === 0) {
        return callback();
      }

      // 可见小数位
      let { message } = rule;
      const reg = new RegExp(`^[1-9]\\d*$`);
      if (value && !reg.test(value)) {
        callback(new Error(message || this.$t("只允许输入正整数")));
      } else {
        return callback();
      }
    },
    //     changeAmount(val) {
    //       console.log(this.amount);
    //       console.log(val);
    //     },
    //     pay() {
    //       if (this.payMethod === "wx") {
    //         this.$toast.loading({
    //           loadingType: "ring",
    //           loadingColor: "green",
    //           msg: "支付中...",
    //         });
    //         setTimeout(() => {
    //           this.$toast.close();
    //         }, 3000);
    //       } else {
    //         this.$toast.loading({
    //           loadingType: "ring",
    //           msg: "支付中...",
    //         });
    //         setTimeout(() => {
    //           this.$toast.close();
    //         }, 3000);
    //       }
    //     },
  },
};
</script>

<style lang="scss" scoped>
.charge {
  min-height: 100vh;
  background-color: #f4f4f4;
}

.jf {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0.15rem;
  border-radius: 8px;

  .c-01 {
    font-size: 0.14rem;
    color: #666;
    padding: 0.1rem 0;
  }

  .c-03 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.2rem 0 0;

    .i {
      cursor: pointer;
      height: 30px;
      color: #333;
      padding: 0 15px;
      display: flex;
      justify-content: center;
      border: 1px solid #ccc;
      border-radius: 8px;
      align-items: center;
      width: 0.8rem;
      margin-bottom: 0.15rem;
      font-size: 0.14rem;
      // &:nth-child(n + 5) {
      //   width: 1.05rem;
      // }

      &.active {
        color: #fff;
        background-image: linear-gradient(to right, #7594fc, #4584fd);
        border-color: transparent;
      }
    }
  }

  .c-04 {
    color: #666;
    font-size: 0.14rem;
    padding: 0.15rem 0;
  }

  .c-05 {
    padding: 0.15rem 0.1rem;

    .ico {
      margin-right: 5px;
    }
  }
}

.submit {
  height: 0.36rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  background-image: linear-gradient(to right, #7c92f4, #5481f4);
  color: #fff;
  font-size: 0.14rem;
  border-radius: 4px;
}

.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.1rem 0;
  background-image: url("@/assets/images/user_m_bg_01_03.png");
  background-size: 100% 100%;
  padding: 0.2rem;

  .r {
    display: flex;
    align-items: center;

    .btn {
      width: 0.6rem;
      height: 0.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-radius: 8px;
      font-size: 0.14rem;

      &.btn-1 {
        color: #fc6f24;
      }

      &.btn-2 {
        color: #51c28f;
        margin-left: 10px;
      }
    }
  }

  .l {
    color: #fff;
    font-size: 0.14rem;

    .money {
      font-size: 0.2rem;
      font-weight: bold;
    }
  }
}

.ts {
  margin-top: 0.15rem;

  .item {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.2rem;
    border-radius: 8px;

    .tit {
      // height: 0.52rem;
      text-align: center;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      // background-image: url("@/assets/images/user_m_icon_02_03.png");
      // background-size: 100% 100%;
      color: #333;
      font-size: 0.16rem;
      padding-top: 0.15rem;
    }

    .cont {
      padding: 0.15rem;

      .t {
        font-size: 0.12rem;
        color: #333;
        margin-bottom: 5px;
      }
    }
  }
}

.red {
  color: #ff0000;
}

.pt20 {
  padding-top: 10px;
}

::v-deep .el-radio__label {
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-size: .16rem;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-radio__inner {
  transform: scale(1.3);
  margin-right: .3rem;
}
</style>
